<template>
	<div class="contentbox">
    <div class="f-empty-cart">
      <img src="../../assets/img/emptycart.png" alt="">
      <p>你的购物车中没有商品</p>
      <a href="javascript:;" @click="tiaozhuan()">去逛逛</a>
    </div>
    <div class="f_list">
      <shopcar-store :items="item" @tmoney="jieshou"></shopcar-store>
    </div>
    <div class="jiesuan">
	        <div class="j_left">
	            <span class="allanniu" @click="allanniu()">√</span>
	            <span class="allselect">全选</span>
	            <div class="price">合计：<span>{{jieshou1}}元</span></div>
	        </div>
	        <div class="j_right">结算</div>
	    </div>
	</div>
</template>
<script type="text/ecmascript-6">
  import ShopcarStore from "./shopcar_store.vue";
  export default {
    props:["item","length"],
    components:{
      ShopcarStore,
    },
    data(){
      return{
        items:[],
        jieshou1:0
      }
    },
    mounted:function(){
      var that=this;
      setTimeout(function () {
        that.init();
      },1000)
    },
    methods:{
      counter:function(){
        this.jieshou1=0;
        for(let i=1;i<$(".anniu").length;i+=2){
          if($(".anniu").eq(i).attr("class")=="anniu checked"){
            var price=parseInt($(".anniu").eq(i).parent().children(".goumai").children(".new").html().substring(1));
            var num=parseInt($(".anniu").eq(i).parent().children(".goumai").children(".jiajian").children(".num").html());
            this.jieshou1+=price*num;
          }
        }
      },
      jieshou:function(data){
        this.jieshou1=data;
      },
      allanniu:function () {
        if ($(event.currentTarget).attr("class")=="allanniu checked"){
          $(event.currentTarget).removeClass("checked");
          $(".anniu").removeClass("checked");
        }
        else {
          $(event.currentTarget).addClass("checked");
          $(".anniu").addClass("checked");
        }
        this.counter();
      },
      tiaozhuan:function(){
        this.$router.push("/ShopClassify");
      },
      init:function(){
        if(this.item.length<=0){
          $(".f-empty-cart").show();
          $(".f_list").hide();
          $(".jiesuan").hide();
        }else{
          $(".f-empty-cart").hide();
          $(".f_list").show();
          $(".jiesuan").show();
        }
      }
    }
  }
</script>
<style lang="scss">
.contentbox{
  flex: 1;
  width:100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.jiesuan {
  position: fixed;
  width: 100%;
  bottom:60px;
  display: flex;
}

.j_left {
  width: 60%;
  padding: 0.1rem 0 0.1rem 0.1rem;
  display: flex;
  background: white; }

.j_right {
  width: 40%;
  padding: 0.1rem 0;
  background: #d0d0d0;
  font-size: 18px;
  color: white;
  text-align: center;
  font-family: initial;
  line-height: 35px;
}

.allselect {
  margin-left: 0.1rem;
  color: gray;
  font-size: 18px;
  font-family: initial; }

.price {
  font-size: 16px;
  width: 60%;
  text-align: right;
  font-family: initial; }

.price span {
  color: #e8065b; }
.allanniu {
  width: 0.2rem;
  height: 0.2rem;
  border: 1px solid gray;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  color: white;
}
.checked{
  background:#e8065b;
  border:1px solid #e8065b;
}
.contentbox{
  background:#F3F4F7;
}
.f-empty-cart{
  width:100%;
  height:2.63rem;
  display:none;
}
.f-empty-cart img{
  width:100%;
}
.f-empty-cart p{
  line-height: 0.53rem;
  color: #5a5a5a;
  text-align: center;
  font-size:14px;
}
.f-empty-cart a{
  display: block;
  width:1.64rem;
  height:0.42rem;
  background: #f93244;
  color: #FFFFFF;
  line-height: 0.42rem;
  text-align: center;
  margin:0 auto;
  border-radius: 0.04rem;
  font-size:14px;
}
.f_list{
  display:none;
}
.jiesuan{
  display: flex;
}
</style>
